<template>
    <div class="page">
        <!-- 头部个人信息 -->
        <div class="header">
            <div class="user-info">
                <div class="avatar" @click="goToAccountPage">
                    <img :src="userAvatar" alt="">
                </div>
                <div class="info">
                    <div class="name">{{ displayName }}</div>
                    <div class="status" @click="goToVerification">
                        <template v-if="isVerified">已实名: {{ userRealName }}</template>
                        <template v-else>完善实名信息</template>
                    </div>
                </div>
            </div>
            <div class="right-icons">
                <van-icon name="chat-o" size="32" weight="800"/>
                <van-icon name="setting-o" size="32" weight="800"/>
            </div>
        </div>

        <!-- 神券区域 -->
        <div class="coupon-banner">
            <div class="left">
                <div class="tag">神券</div>
                <div class="text">天天领神券 最高膨胀至<span class="highlight">20</span>元</div>
            </div>
            <van-button type="warning" class="expand-btn" round>免费膨胀</van-button>
        </div>

        <!-- 我的资产 -->
        <div class="section asset-section">
            <div class="title">我的资产</div>
            <div class="asset-grid">
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="gift-o" size="24" color="#ff4e44"/>
                        <span style="font-weight: 500;">红包/神券</span>
                        <van-badge dot color="#ff4e44" style="margin-top: 8px;"/>
                    </div>
                    <div class="asset-value"><span style="color: #ff4e44;">13</span><span class="unit">个未使用</span></div>
                </div>
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="coupon-o" class="icon" color="#ff9f1c" size="24"/>
                        <span style="font-weight: 500;">代金券</span>
                    </div>
                    <div class="asset-value"><span style="color: #ff4e44;">6</span><span class="unit">张未使用</span></div>
                </div>
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="balance-pay" class="icon" color="#ffc300" size="24"/>
                        <span style="font-weight: 500;">津贴</span>
                    </div>
                    <div class="asset-value">可叠加满减</div>
                </div>
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="points" class="icon" color="#ffc300" size="24"/>
                        <span style="font-weight: 500;">米粒</span>
                        <van-tag type="danger" size="mini" style="margin-left: 4px;">新</van-tag>
                    </div>
                    <div class="asset-value"><span style="color: #ff4e44;">0</span><span class="unit">个未使用</span></div>
                </div>
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="balance-o" class="icon" color="#ff9f1c" size="24"/>
                        <span style="font-weight: 500;">美团币</span>
                    </div>
                    <div class="asset-value"><span style="color: #ff4e44;">1</span><span class="unit">笔返利</span></div>
                </div>
                <div class="asset-item">
                    <div class="asset-title">
                        <van-icon name="clock" class="icon" color="#ff4e44" size="24"/>
                        <span style="font-weight: 500;">神抢手券</span>
                        
                    </div>
                    <div class="asset-value"><span style="color: #ff4e44;">0</span><span class="unit">张未使用</span></div>
                </div>
            </div>
        </div>

        <!-- 我的收藏 -->
        <div class="section collection-section">
            <div class="title">我的收藏</div>
            <div class="collection-content">
                <img src="../../assets/images/xia.png" alt="" class="collection-img">
                <van-icon name="arrow" class="arrow-icon"/>
            </div>
        </div>

        <!-- 我的钱包 -->
        <div class="section wallet-section">
            <div class="section-header">
                <span class="title">我的钱包</span>
                <span class="more">
                    进入钱包
                   
                    <van-icon name="arrow" />
                </span>
            </div>
            <div class="wallet-grid">
                <div class="wallet-item">
                    <div class="amount">
                        <span class="number">7.1</span>
                        <span class="unit">万</span>
                    </div>
                    <div class="label">借钱</div>
                    <div class="desc">大约可借</div>
                </div>
                <div class="wallet-item">
                    <div class="amount">
                        <span class="number">1</span>
                        <span class="unit">个</span>
                       
                    </div>
                    <div class="label">可用额度</div>
                    <div class="desc">先用后还</div>
                </div>
                <div class="wallet-item" @click="goToVerification">
                    <div class="amount">1<span class="unit">个</span></div>
                    <div class="label">实名认证</div>
                    <div v-if="isVerified" class="desc verified-label">已认证: {{userRealName}}</div>
                    <div v-else class="desc">待完善</div>
                </div>
                <div class="wallet-item">
                    <div class="amount">1<span class="unit">份</span></div>
                    <div class="label">消费账单</div>
                    <div class="desc">待查看</div>
                </div>
            </div>
        </div>

        <!-- 我的功能 -->
        <div class="section function-section">
            <div class="title">我的功能</div>
            <div class="function-grid">
                <div class="function-item">
                    <van-icon name="location-o" size="32" color="#ffc300"/>
                    <span>我的地址</span>
                </div>
                <div class="function-item">
                    <div class="van-icon-container">
                        <van-icon name="guide-o" size="32" color="#ffc300"/>
                    </div>
                    <span>我的足迹</span>
                </div>
                <div class="function-item">
                    <van-icon name="records" size="32" color="#ffc300"/>
                    <span>答谢记录</span>
                </div>
                <div class="function-item">
                    <van-icon name="comment-o" size="32" color="#ffc300"/>
                    <span>我的评价</span>
                </div>
                <div class="function-item">
                    <van-icon name="bill-o" size="32" color="#ffc300"/>
                    <span>发票助手</span>
                </div>
                <div class="function-item">
                    <van-icon name="coupon-o" size="32" color="#ffc300"/>
                    <span>集点返券</span>
                </div>
                <div class="function-item">
                    <van-icon name="shop-o" size="32" color="#ffc300"/>
                    <span>企业用餐</span>
                </div>
                <div class="function-item">
                    <van-icon name="setting-o" size="32" color="#ffc300"/>
                    <span>餐具设置</span>
                </div>
            </div>
        </div>

        <!-- 我的服务 -->
        <div class="section service-section">
            <div class="title">我的服务</div>
            <div class="service-grid">
                <div class="service-item">
                    <van-icon name="question-o" size="32" color="#ffc300"/>
                    <span>帮助与反馈</span>
                </div>
                <div class="service-item" @click="goToCustomerService">
                    <van-icon name="service-o" size="32" color="#ffc300"/>
                    <span>客服中心</span>
                </div>
                <div class="service-item" @click="goToGarbageClassification">
                    <van-icon name="delete-o" size="32" color="#ffc300"/>
                    <span>垃圾分类</span>
                </div>
            </div>
        </div>

        <!-- 更多推荐 -->
        <div class="section recommend-section">
            <div class="title">更多推荐</div>
            <div class="recommend-grid">
                <div class="recommend-item">
                    <van-icon name="gift-o" size="32" color="#ffc300"/>
                    <span>邀请有奖</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="shop-o" size="32" color="#ffc300"/>
                    <span>浣熊食堂</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="manager-o" size="32" color="#ffc300"/>
                    <span>商家入驻</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="logistics" size="32" color="#ffc300"/>
                    <span>骑手招募</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="friends-o" size="32" color="#ffc300"/>
                    <span>成为合作商</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="diamond-o" size="32" color="#ffc300"/>
                    <span>美团公益</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="balance-pay" size="32" color="#ffc300"/>
                    <span>美团碳账户</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="gift-card-o" size="32" color="#ffc300"/>
                    <span>福利专享</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="after-sale" size="32" color="#ffc300"/>
                    <span>福利日日领</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="tv-o" size="32" color="#ffc300"/>
                    <span>美团电商</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="comment-circle-o" size="32" color="#ffc300"/>
                    <span>小美评审团</span>
                </div>
                <div class="recommend-item">
                    <van-icon name="location-o" size="32" color="#ffc300"/>
                    <span>地址反馈</span>
                </div>
            </div>
        </div>
    </div>
    <AppFooter/>
</template>

<script>
import AppFooter from '../../components/AppFooter.vue';
import { Icon, Button, Badge, Tag } from 'vant';
import defaultAvatar from '../../assets/images/meituan.png';

export default {
    name: 'MinePage',
    components: {
        AppFooter,
        [Icon.name]: Icon,
        [Button.name]: Button,
        [Badge.name]: Badge,
        [Tag.name]: Tag
    },
    data() {
        return {
            userRealName: '',
            isVerified: false,
            userAvatar: defaultAvatar,
            userNickname: ''
        };
    },
    computed: {
        displayName() {
            return this.userNickname || 'rlM793425663';
        }
    },
    created() {
        // 检查是否已实名认证
        this.checkVerificationStatus();
        
        // 获取用户昵称
        this.userNickname = localStorage.getItem('userNickname') || '';
        
        // 获取用户头像
        const savedAvatar = localStorage.getItem('userAvatar');
        if (savedAvatar) {
            this.userAvatar = savedAvatar;
        }
    },
    methods: {
        checkVerificationStatus() {
            // 从本地存储获取实名认证状态
            const verified = localStorage.getItem('userVerified') === 'true';
            const realName = localStorage.getItem('userRealName');
            
            this.isVerified = verified;
            this.userRealName = realName || '';
        },
        goToAccountPage() {
            this.$router.push('/account');
        },
        goToVerification() {
            this.$router.push('/verification');
        },
        goToCustomerService() {
            this.$router.push('/customerservice');
        },
        goToGarbageClassification() {
            this.$router.push('/garbage');
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
   
}

.header {
    width: 100%;
    background: #fff;
    padding: 88px 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
        display: flex;
        align-items: center;
        gap: 24px;

        .avatar {
            width: 115px;
            height: 115px;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .info {
            .name {
                font-size: 36px;
                font-weight: bold;
                color: #333;
                margin-bottom: 12px;
            }
            .status {
                font-size: 25px;
                color: #1e1919;
                
            }
        }
    }

    .right-icons {
        display: flex;
        gap: 32px;
        color: #333;
        margin-right: 60px;
    }
}

.coupon-banner {
    margin: 24px;
    background: #ffe6e6;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        gap: 16px;

        .tag {
            background: linear-gradient(to right, #ff5f5f, #9c27b0);
            -webkit-background-clip: text;
            color: transparent;
            font-size: 34px;
            font-weight: bold;
        }

        .text {
            font-size: 25px;
            color: #333;

            .highlight {
                color: #ff5f5f;
                font-weight: bold;
                margin: 0 4px;
            }
        }
    }

    .expand-btn {
        height: 56px;
        font-size: 24px;
        padding: 0 24px;
        border-radius: 8px;
        background: linear-gradient(to right, #ff5f5f, #9c27b0);
        border: none;
        color: #fff;
        margin-right: -8px;
    }
}

.section {
    margin: 24px;
    background: #fff;
    border-radius: 16px;
    padding: 32px;

    .title {
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 32px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;

        .title {
            margin-bottom: 0;
        }

        .more {
            color: #666;
            font-size: 23.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: -10px;

    .asset-item {
        text-align: center;

        .asset-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
            font-size: 27px;
            color: #333;

            .icon {
                font-size: 32px;
            }
            .van-badge {
                margin-top: 8px;
            }
        }

        .asset-value {
            font-size: 23px;
            font-weight: 500;
            color: #666;

            .unit {
                font-size: 23px;
                color: #666;
                margin-left: 8px;
            }
        }
    }
}

.collection-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .collection-img {
        width: 220px;
        height: 176px;
        border-radius: 12px;
        object-fit: cover;
    }

    .arrow-icon {
        color: #999;
        font-size: 32px;
    }
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    .wallet-item {
        text-align: center;
        cursor: pointer;

        .amount {
            font-size: 35px;
            font-weight: 500;
            color: #333;
            margin-bottom: 12px;
            position: relative;

            .unit {
                font-size: 24px;
                margin-left: 4px;
            }

            .van-badge {
                position: absolute;
                top: -12px;
                right: -12px;
            }
        }

        .label {
            font-size: 25px;
            color: #333;
            margin-bottom: 8px;
        }

        .desc {
            font-size: 23.5px;
            color: #999;
        }
        
        .verified-label {
            color: #07c160;
            font-size: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
    }
}

.function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;

    .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        .van-icon, .van-icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 64px;
            background-color: #fff9e6;
            border-radius: 50%;
        }

        span {
            font-size: 24px;
            color: #333;
            font-weight:500;
        }
    }
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;

    .service-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        .van-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 64px;
            background-color: #fff9e6;
            border-radius: 50%;
        }

        span {
            font-size: 24px;
            color: #333;
            font-weight:500;
        }
    }
}

.recommend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;

    .recommend-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        .van-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 64px;
            height: 64px;
            background-color: #fff9e6;
            border-radius: 50%;
        }

        span {
            font-size: 24px;
            color: #333;
            font-weight:500;
        }
    }
}
</style>
            








